import React, { Component } from 'react'
// import axios from 'axios'
import PubSub from 'pubsub-js';
export default class Search extends Component {
    userName = React.createRef()
    handleSearch =  async () => {
        const {value:keyWord} = this.userName.current
        PubSub.publish('userInformation',{isFirst:false,isLoading:true})
        // axios 方法
        // axios.get(`api1/search/users2?q=${keyWord}`).then(
        //     response => PubSub.publish('userInformation',{isLoading:false,data:response.data.items}),
        //     error => PubSub.publish('userInformation',{isLoading:false,err:error.message})
        // )
        // fetch 方法
        // fetch(`api1/search/users2?q=${keyWord}`).then(
        //     response => {
        //         return response.json()}
        // ).then(
        //     response => {
        //         PubSub.publish('userInformation',{isLoading:false,data:response.items})
        //     }
        // ).catch(error => {
        //     PubSub.publish('userInformation',{isLoading:false,err:error})
        // })
        // fetch await解决回调方法
        try {
            const promiseDate = await fetch(`api1/search/users2?q=${keyWord}`)
            const date = await promiseDate.json()
            PubSub.publish('userInformation',{isLoading:false,data:date.items})
        }catch(error) {
            PubSub.publish('userInformation',{isLoading:false,err:error.message})
        }
    }
    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>
                    <input ref={this.userName} type="text" placeholder="enter the name you search"/>&nbsp;
                    <button onClick={this.handleSearch}>Search</button>
                </div>
            </section>
        )
    }
}
